<template>
    <el-row type="flex" justify="center" style="align-content: center;height: 100%;margin-top: 2%">
        <el-form ref="ruleFormRef" style="width: 40%;" :model="ruleForm" :rules="rules" label-width="auto"
            :size="formSize" status-icon :label-position="labelPosition">
            <el-form-item label="更新头像">
                <el-upload :auto-upload="true" list-type="picture-card" ref="uploadRef"
                    :action="`/api/user/upload-portrait?id=${userStore.id}`" :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :limit="1">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </el-form-item>
            <el-form-item label="更新昵称">
                <el-input v-model="ruleForm.username" style="width: 100%" :rows="10" type="text" />
            </el-form-item>
            <el-form-item>
                <el-row style="width: 100%; align-content: center;margin-top: 5%;" justify="center">
                    <el-col :span="14">
                        <el-button style="background-color: #fbaf5a; color: white; width: 100%;height: 40px;"
                            @click="submitForm">更新</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-row>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, ComponentSize, FormInstance, FormRules, UploadFile } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadInstance, UploadProps } from 'element-plus'
import type { FormProps } from 'element-plus'
import { userInfoStore } from '../assets/userStore/userStore'
import router from '../router'
import { userApis } from '../assets/apis/UserApis'
import { UserModel } from '../assets/models/User'


interface RuleForm {
    username: string,
    description: string,
    uid: number
}

const labelPosition = ref<FormProps['labelPosition']>('top')
const userStore = userInfoStore();
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const uploadRef = ref<UploadInstance>()
const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<UserModel>({
    username: '',
    id: userStore.id
})

const rules = reactive<FormRules<UserModel>>({
    username: [
        {
            required: true,
            message: 'Please input Activity name',
            trigger: 'blur'
        }
    ]
})

const submitForm = async () => {
    if (!ruleForm.username) {
        ElMessage.error('请输入昵称')
        return
    }
    
    // 更新用户信息（昵称）
    // 注意：头像通过el-upload组件自动上传到后端
    userStore.update(userStore.id, ruleForm.username)
    ElMessage.success('信息更新成功！请刷新页面查看最新信息')
    
    // 可选：刷新页面
    setTimeout(() => {
        window.location.reload()
    }, 1000)
}

const handleRemove: UploadProps['onRemove'] = (file: UploadFile) => {
    console.log(file);
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true;
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不得超过2MB！');
        return false;
    }
    return true;
}
</script>


<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}


.header_register {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}
</style>